<template>
  <div>
    <h3>age:{{ age }}</h3>
    <h3>name:{{name}}</h3>
    <h3>skill:{{skill}}</h3>
    <h3>male:{{male}}</h3>
  </div>
</template>

<script>
export default {
  name: 'prop-check',
  props: {
    // 年龄必须是数组
    age: Number,
    name: {
      type: String,
      required: true
    },
    skill: {
      type: String,
      default: 'jump'
    },
    male: {
      // 自定义校验规则
      validator (value) {
        // 自定义的校验一般会写一个逻辑
        // 通过返回true和false告诉vue校验成功失败
        const isIncluded = ['男孩子', '女孩子'].includes(value)
        return isIncluded
      }
    }
  }
}
</script>

<style></style>
